<template>
  <!-- 具名插槽 -->
  <div>
    <child-juming>
      <template v-slot:juming>
        <div>{{ msg1 }}</div>
      </template>
    </child-juming>
    <child-juming>
      <template #juming>
        <div>{{ msg2 }}</div>
      </template>
    </child-juming>
  </div>
  <!-- 作用域插槽 -->
  <div>
    <child-zuoyongyu>
      <template #zuoyongyu="scope">
        <div>
          <el-button @click="clickBtn(scope.item, scope.index)">点击</el-button>
        </div>
      </template>
    </child-zuoyongyu>
  </div>
</template>
<script setup lang="ts">
import childJuming from "./child-juming.vue";
import childZuoyongyu from "./child-zuoyongyu.vue";
import { ref } from "vue";

const msg1 = ref("");
msg1.value = "具名插槽写法一，内容来自父组件";
const msg2 = ref("");
msg2.value = "具名插槽写法二，内容来自父组件";
const clickBtn = (item: any, index: number) => {
  console.log(item, index);
};
</script>
<style lang="scss" scoped></style>
